<template>
	<view class="re_list">
		<!-- 推荐描述 -->
		<view class="re_des">
			<view class="left">
				推荐歌单
			</view>
			<view class="right">
				歌单广场
			</view>
		</view>
		
		<!-- 推荐歌单 -->
		<view class="re_img">
			<re-list-item v-for="(item, index) in list" :itemObj="item" :key="index"></re-list-item>
		</view>
		
	</view>
</template>
 
<script>
	import ReListItem from "./ReListItem"
	
	export default {
		name: '',
		props: {
			list: {
				type: Array,
				default() {
					return []
				}
			}
		},
		components:{ ReListItem },
		data(){
			return {
				
			}
		},
		methods:{
			
		}
	}
</script>
 
<style lang="less" scoped>
	.re_des {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		text-align: center;
		.right, .left {
			height: 31px;
			line-height: 31px;
			margin: 0 10px 0;
		}
		.right {
			width: 80px;
			border: 1px solid #eee;
			border-radius: 10px;
			font-size: 8px;
			background-color:#f1f2f6;
		}
		.left {
			font-size: 14px;
		}
	}
	.re_img {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 5px;
	}
</style>
